We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Icon List

Icon List — Default

  • Icon List Alt Unlinked Title

    This list item has this short description and an unlinked title.

  • Icon List Alt Linked Title

    This list item has this short description and a linked title.

  • Icon List Alt Title Only

  • This list item has this short description and no title.

Icon List — Condensed

  • Icon List Alt Unlinked Title

  • Icon List Alt Linked Title

  • Icon List Alt Title Only

  • This list item has this short description and no title.

Icon List — Borders

  • Icon List Alt Unlinked Title

    This list item has this short description and an unlinked title.

  • Icon List Alt Linked Title

    This list item has this short description and a linked title.

  • Icon List Alt Title Only

  • This list item has this short description and no title.

HTML

<ul class="icon-list">
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title">Icon List Alt Unlinked Title</p>
            <p>This list item has this short description and an unlinked title.</p>
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title"><a href="#">Icon List Alt Linked Title</a></p>
            <p>This list item has this short description and a linked title.</p>
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p class="icon-list-item-content-title">Icon List Alt Title Only</p>            
        </div>
    </li>
    <li class="icon-list-item">
        <div class="icon-list-item-icon cfaicon-iconSpecificNameGoesHere"></div>
        <div class="icon-list-item-content">
            <p>This list item has this short description and no title.</p>
        </div>
    </li>                
</ul>

Problem Being Solved

We need a way to display a list using our icons to draw attention or add emphasis.

When to Use

It can be used if list content would be enhanced by icons

When Not to Use

  • It should not be used to display non-list content or large amounts of text.
  • Do not use this in an edge-to-edge section element.

Formatting

  • This pattern should only be used in the regular or full-width section elements (never edge-to-edge).
  • For bordered icon list items, add the class "bordered" to the UL element with the class "icon-list."
  • The icon list title should have the class "icon-list-item-content-title."
    • Additionally, you can add the class "h3" to achieve a header-like style (see uses in project EVOLVE).